﻿<!DOCTYPE html>
<html>
<head>
  <title>Fishbone</title>
  <link rel="stylesheet/less" type="text/css" media="screen, projection" href="../_css/site.less" />
  <link rel="stylesheet/less" type="text/css" media="print" href="../_css/site-prn.less" />
  <script src="../_js/less.js" type="text/javascript"></script>
  <!--CAUTION: Do not use any other version of JQuery. This will help us ensure x-browser support. -->
  <script src="//code.jquery.com/jquery-1.8.1.min.js" type="text/javascript"></script>
  <script src="../_js/lorem.js" type="text/javascript"></script>
  <script type="text/javascript">

    function refreshPage() {
      //alert("here");
      var i = $("#assignedByMe div.row a").length - 1;
      while (i--) {
        $("#assignedByMe div.row a").get(i).innerHTML = $("#assignedByMe div.row a").get(i - 1).innerHTML;
      }
      var anumber = Math.floor((Math.random() * 600) + 1);
      var alength = Math.floor((Math.random() * 45) + 1);
      if (alength < 20) alength = 20;
      $("#assignedByMe div.row a").first().addClass("italic").get(0).innerHTML = loremIpsum[anumber].name.substring(0, alength);

      var i = $("#assignedToMe div.row a").length - 1;
      while (i--) {
        $("#assignedToMe div.row a").get(i).innerHTML = $("#assignedToMe div.row a").get(i - 1).innerHTML;
      }
      var anumber = Math.floor((Math.random() * 600) + 1);
      var alength = Math.floor((Math.random() * 45) + 1);
      if (alength < 20) alength = 20;
      $("#assignedToMe div.row a").first().addClass("bold").get(0).innerHTML = loremIpsum[anumber].name.substring(0, alength);

    }

    $(document).click(function () {
      console.log("doc click");
      $(".js-flyout").hide();
    });

    $(function () {
      $("#rcm").click(function (e) {
        e.stopPropagation();
        var pos = $(this).offset();
        var menu = $("#rcm-popup");
        var dif = menu.width() - $(this).width();
        menu.css({ 'left': pos.left - dif + 'px', 'top': pos.top + $(this).height() + 'px' });
        $("#rcm-popup").slideToggle('fast');
      });
      $("#stg-src .ddl").click(function (e) {
        e.stopPropagation();
        var pos = $(this).offset();
        var menu = $("#src-options");
        var dif = menu.width() - $(this).width() - 20;
        menu.css({ 'left': pos.left - dif + 'px', 'top': (pos.top + $(this).height() + 6) + 'px' });
        $("#src-options").fadeIn(400);
        console.log("ddl click");
      });
      $("#src-options").click(function (e) {
        e.stopPropagation();
      });
      $("#rcm-popup ul li").click(function (e) {
        e.stopPropagation();
        $("#rcm a").html($(this).html() + '<span>&nbsp;</span>');
        $("#taskPane, #calendarPane, #searchPane, #inboxPane").addClass("hide");
        if ($(this).hasClass("js-taskPane")) {
          $("#taskPane").removeClass("hide");
        }
        else if ($(this).hasClass("js-inboxPane")) {
          $("#inboxPane").removeClass("hide");
        }
        else if ($(this).hasClass("js-searchPane")) {
          $("#searchPane").removeClass("hide");
        }
        else if ($(this).hasClass("js-calendarPane")) {
          $("#calendarPane").removeClass("hide");
        }
        $("#rcm-popup").slideUp('fast');
      });

      $(".js_abc").click(function () {
        $("#contentGoesHere").html("<h1>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h1><h1>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h1><h1>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h1><h1>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h1>")
      });

      $(".js_to").click(function () {
        $("." + $(this).attr("rel")).removeClass("hide");
        setTimeout(function () {
          $(".mini-loading").addClass("hide");
          $("#assignedToMe div.row a").each(function () {
            var anumber = Math.floor((Math.random() * 600) + 1);
            var alength = Math.floor((Math.random() * 45) + 1);
            if (alength < 20) alength = 20;
            $(this).html(loremIpsum[anumber].name.substring(0, alength));
          });
        }, 1200);
      });

      $(".js_by").click(function () {
        $("." + $(this).attr("rel")).removeClass("hide");
        setTimeout(function () {
          $(".mini-loading").addClass("hide");
          $("#assignedByMe div.row a").each(function () {
            var anumber = Math.floor((Math.random() * 600) + 1);
            var alength = Math.floor((Math.random() * 45) + 1);
            if (alength < 20) alength = 20;
            $(this).html(loremIpsum[anumber].name.substring(0, alength));
          });
        }, 1200);
      });
    });

    setInterval('refreshPage()', 60000);
  </script>
</head>
<body>
  <div id="browser-print-msg">
    <h3>Due to the limitations imposed by browser print functionality, Fishbone does not support browser print. Instead, click on the "Print" icon available on top right corner of the page to see much improved printable version of this web page.</h3>
    <br/>
    <h1>Hope you like it!</h1>
  </div>
  <div id="wrapper">
    <div id="header">       
      <span id="company-name">Dummy Inc.</span> <span id="user-bar">Welcome <a href="javascript:void(0);">
        Pratik Mehta</a> | <a href="javascript:void(0);">Help</a> | <a href="javascript:void(0);">
          Signout</a> </span>
    </div>
    <div id="nav">
      <a href="javascript:void(0);">Dashboard</a> <a href="javascript:void(0);" class="selected">Portfolios</a> <a href="javascript:void(0);">Projects</a> <a href="javascript:void(0);">Staff</a> <a href="javascript:void(0);">Scope</a> <a href="javascript:void(0);">Plan</a> <a href="javascript:void(0);">Defects</a> <a href="javascript:void(0);">Timesheets</a> <a href="javascript:void(0);">Documents</a> <a href="javascript:void(0);">Ideas</a>
      <div id="rcm">
        <a href="javascript:void(0);">Search Fishbone<span>&nbsp;</span></a>
      </div>
      <div id="rcm-popup" class="js-flyout">
        <ul>
          <li class="js-taskPane">Tasks</li>
          <li class="js-calendarPane">Calendar</li>
          <li class="js-inboxPane">Inbox</li>
          <li class="js-searchPane">Search Fishbone</li>
        </ul>
      </div>
    </div>
    <div id="stage">
      <div id="leftCol">
        <div class="mt-s">
          <div id="page-header">
            <h3 id="page-title">
              Portfolio Listing</h3>
            <div id="stg-tlb">
              <a href="javascript:void(0);" id="stg-help"></a><a href="javascript:void(0);" id="stg-prt">
              </a><a href="javascript:void(0);" id="stg-pdf"></a>
            </div>
            <div class="fc">
            </div>
          </div>
          <div class="pt-s">
            Content will come here...
          </div>
        </div>
      </div>
      <div id="rightCol">
        <div id="searchPane" class="">
          <div class="head">
            <h3 class="fl">
              Search Fishbone</h3>
          </div>
          <div id="stg-src">
            <div class="wrap">
              <input type="text" value="search fishbone..." maxlength="50" /><a href="javascript:void(0);"
                class="src">&nbsp;</a><a href="javascript:void(0);" class="ddl">&nbsp;</a>
            </div>
          </div>
          <div id="src-options" class="hide js-flyout">
            <div class="fr p-s">
              <a href="javascript:void(0);">Select All</a> | <a href="javascript:void(0);">Deselect
                All</a>
            </div>
            <div class="fc">
            </div>
            <div class="col">
              <label class="_cb" for="chkaccounts">
                <input class="_cb" type="checkbox" id="chkaccounts" name="chkaccounts" value="chkaccounts"
                  checked="checked" />
                Portfolios</label>
            </div>
            <div class="col">
              <label class="_cb" for="chkprojects">
                <input class="_cb" type="checkbox" id="chkprojects" name="chkprojects" value="chkprojects"
                  checked="checked" />
                Projects</label>
            </div>
            <div class="fc">
            </div>
            <div class="col">
              <label class="_cb" for="chkstaff">
                <input class="_cb" type="checkbox" id="chkstaff" name="chkstaff" value="chkstaff"
                  checked="checked" />
                Staff</label>
            </div>
            <div class="col">
              <label class="_cb" for="chkspecs">
                <input class="_cb" type="checkbox" id="chkspecs" name="chkspecs" value="chkspecs"
                  checked="checked" />
                Scope</label>
            </div>
            <div class="fc">
            </div>
            <div class="col">
              <label class="_cb" for="chkplans">
                <input class="_cb" type="checkbox" id="chkplans" name="chkplans" value="chkplans"
                  checked="checked" />
                Plans</label>
            </div>
            <div class="col">
              <label class="_cb" for="chkchanges">
                <input class="_cb" type="checkbox" id="chkchanges" name="chkchanges" value="chkchanges"
                  checked="checked" />
                Defects</label>
            </div>
            <div class="fc">
            </div>
            <div class="col">
              <label class="_cb" for="chktasks">
                <input class="_cb" type="checkbox" id="chktasks" name="chktasks" value="chktasks"
                  checked="checked" />
                Tasks</label>
            </div>
            <div class="col">
              <label class="_cb" for="chktimesheets">
                <input class="_cb" type="checkbox" id="chktimesheets" name="chktimesheets" value="chktimesheets"
                  checked="checked" />
                Timesheets</label>
            </div>
            <div class="fc">
            </div>
            <div class="col">
              <label class="_cb" for="chkdocs">
                <input class="_cb" type="checkbox" id="chkdocs" name="chkdocs" value="chkdocs" checked="checked" />
                Documents</label>
            </div>
            <div class="col">
              <label class="_cb" for="chkreports">
                <input class="_cb" type="checkbox" id="chkreports" name="chkreports" value="chkreports"
                  checked="checked" />
                Ideas</label>
            </div>
            <div class="fc">
            </div>
            <div class="col">
              <label class="_cb" for="chkmessages">
                <input class="_cb" type="checkbox" id="chkmessages" name="chkmessages" value="chkmessages"
                  checked="checked" />
                Messages</label>
            </div>
            <div class="col">
              <label class="_cb" for="chkforums">
                <input class="_cb" type="checkbox" id="chkforums" name="chkforums" value="chkforums"
                  checked="checked" />
                Calendar</label>
            </div>
            <div class="fc">
            </div>
            <div class="fr p-s">
              <a href="javascript:void(0);" onclick="$(document).click();" class="btn b s">Apply</a><a
                href="javascript:void(0);" onclick="$(document).click();">Cancel</a>
            </div>
            <div class="fc">
            </div>
          </div>
        </div>
        <div id="calendarPane" class="hide">
          <div class="head">
            <h3 class="fl">
              Calendar</h3>
            <a href="javascript:void(0);" class="fr pt-xxs" title="Maximize task view">Maximize
              Calendar</a>
          </div>
        </div>
        <div id="inboxPane" class="hide">
          <div class="head">
            <h3 class="fl">
              Inbox</h3>
            <a href="javascript:void(0);" class="fr pt-xxs" title="Maximize task view">Maximize
              Inbox</a>
          </div>
          <div class="wrapper">
            <div class="cmd-bar">
              <a class="btn w" href="javascript:void(0);" title="Create new task">Compose</a>
            </div>
            <div class="mini-grid">
              <div class="row y">
                <a class="bold" href="javascript:void(0);">Phasellus adipiscing, mauris nec</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Etiam quis congue nisl turpis duis</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Nunc volutpat, eros vel massa nunc</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Donec varius elementum quam nullam</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Sed nec nunc eget justo dignissim...</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Etiam quis congue nisl turpis duis</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Nunc volutpat, eros vel massa nunc</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Donec varius elementum quam nullam</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Sed nec nunc eget justo dignissim...</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Donec varius elementum quam nullam</a><br />
                <span class="bold">From:</span> James Bond<br />
                <span class="bold">When:</span> Today<br />
                <a href="javascript:void(0);">&laquo; Re</a> | <a href="javascript:void(0);">&laquo;
                  Re All</a> | <a href="javascript:void(0);">Fwd &raquo;</a> | <a href="javascript:void(0);">
                    Tag</a> | <a href="javascript:void(0);">Move</a> | <a href="javascript:void(0);">Delete</a>
              </div>
              <div class="fc-fix">
                <div class="pager">
                  <div class="fl">
                    6 to 10 of 23</div>
                  <a href="javascript:void(0);" class="prev js_to" rel="js_to">&nbsp;</a> <a href="javascript:void(0);"
                    class="next js_to" rel="js_to">&nbsp;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div id="taskPane" class="hide">
          <div class="head">
            <h3 class="fl">
              Tasks</h3>
            <a href="javascript:void(0);" class="fr pt-xxs" title="Maximize task view">Maximize
              Tasks</a>
          </div>
          <div class="wrapper">
            <div class="cmd-bar">
              <a class="btn w" href="javascript:void(0);" title="Create new task">Create New</a>
            </div>
            <div class="fc-fix">
              <h4 class="fl">
                Assigned to me:</h4>
              <div class="hide mini-loading fl js_to">
              </div>
            </div>
            <div id="assignedToMe" class="mini-grid">
              <div class="row y">
                <a href="javascript:void(0);">Phasellus adipiscing, mauris nec</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Etiam quis congue nisl turpis duis</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Nunc volutpat, eros vel massa nunc</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Donec varius elementum quam nullam</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Sed nec nunc eget justo dignissim laoreet nec sit amet
                  mi. Quisque turpis est, pharetra at volutpat</a>
              </div>
              <div class="fc-fix">
                <div class="pager">
                  <div class="fl">
                    6 to 10 of 23</div>
                  <a href="javascript:void(0);" class="prev js_to" rel="js_to">&nbsp;</a> <a href="javascript:void(0);"
                    class="next js_to" rel="js_to">&nbsp;</a>
                </div>
              </div>
            </div>
            <div class="fc-fix">
              <h4 class="fl">
                Assigned by me:</h4>
              <div class="hide mini-loading fl js_by">
              </div>
            </div>
            <div id="assignedByMe" class="mini-grid">
              <div class="row y">
                <a href="javascript:void(0);">Phasellus adipiscing, mauris nec</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Etiam quis congue nisl turpis duis</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Nunc volutpat, eros vel massa nunc</a>
              </div>
              <div class="row">
                <a href="javascript:void(0);">Donec varius elementum quam nullam</a>
              </div>
              <div class="row y">
                <a href="javascript:void(0);">Sed nec nunc eget justo dignissim</a>
              </div>
              <div class="fc-fix">
                <div class="pager">
                  <div class="fl">
                    1 to 5 of 23</div>
                  <a href="javascript:void(0);" class="prev js_by" rel="js_by">&nbsp;</a> <a href="javascript:void(0);"
                    class="next js_by" rel="js_by">&nbsp;</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="push">
    </div>
  </div>
  <div id="footer">
    <a href="javascript:void(0);">
      <img id="pl" src="../_images/footer-logo.png" title="Fishbone" alt="Fishbone" /></a>
    <div id="cnl">
      &copy 2012-13 Pratik Mehta. All Rights Reserved. <a href="javascript:void(0);">Terms
        of Use</a> | <a href="javascript:void(0);">Privacy</a><br />
      Icons by <a href="http://www.dryicons.com" target="_blank">DryIcons.com</a> | <a
        href="javascript:void(0);">About Me</a> | <a href="javascript:void(0);">Contact Me</a>
      | <a href="javascript:void(0);">Hire Me</a><br />
    </div>
  </div>
</body>
</html>
